<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">

    <div>
        <el-form :model="cancel" status-icon :rules="rulesl" ref="cancel" label-width="120px" class="demo-ruleForm" style="margin: 200px 400px;">
            <el-form-item label="患者姓名" prop="name">
                <el-input v-model="cancel.name" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="患者身份证号" prop="identity">
                <el-input v-model="cancel.identity" style="width: 400px;"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('cancel')" style="width: 400px;">取消预约</el-button>
            </el-form-item>

        </el-form>
    </div>

</div>



<script>

    var haha = new Vue({
        el:"#app",
        data:{
            cancel:{},
            rulesl: {
                name: [
                    {required: true,message: '请输入姓名',trigger: 'blur'},
                ],
                identity: [
                    {required: true,message: '请输入身份证号',trigger: 'blur'},
                    {min: 17,max: 19,message: '请输入正确的身份证号',trigger: 'blur'}
                ]
            }
        },
        methods:{
            submitForm(formName){
                haha.$refs[formName].validate((valid) => {
                    if (valid){
                        $.post("/ssm/Udepart/abolish",haha.cancel,function (backData) {
                            haha.Persons = backData.data;
                            if (backData.data == 1){
                                haha.$notify.success({
                                   title:"温馨提示"
                                });
                            }
                            if (backData.data == 2){
                                haha.$message.error(backData.msg);
                            }
                        })
                    }
                })
            }
        }
    });

</script>
</body>
</html>